<template>
	<view>
		<swiper
			class="screen-swiper square-dot"
			:style="{ height: upx2px(height) + 'px', minHeight: 0 }"
			:duration="duration"
			:circular="circular"
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			@change="sweiperChange"
		>
			<swiper-item v-for="(item, index) in swiperList" :key="index" @click="jump(item)">
				<view :style="{ padding: 0 + ' ' + upx2px(padding) + 'px' }">
					<image :src="item[itemKey]" :style="{ height: upx2px(height) + 'px', borderRadius: upx2px(borderRadius) + 'px' }" lazy-load />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 首页等轮播
export default {
	props: {
		// 圆角
		borderRadius:{
			type:Number,
			default:20
		},
		//轮播图列表
		swiperList: Array,
		//轮播图图片字段
		itemKey: String,
		//轮播高
		height: {
			type: Number,
			default: 300
		},
		//轮播左右内边距
		padding: {
			type: Number,
			default: 20
		},
		//是否采用衔接滑动
		circular: {
			type: Boolean,
			default: true
		},
		//是否显示指示点
		indicatorDots: {
			type: Boolean,
			default: true
		},
		//是否自动轮播
		autoplay: {
			type: Boolean,
			default: true
		},
		//轮播事件间隔
		interval: {
			type: Number,
			default: 5000
		},
		//轮播切换时间
		duration: {
			type: Number,
			default: 500
		},
		//轮播图片点击跳转key字段
		jumpHref: {
			type: String,
			default: ''
		}
	},
	methods: {
		sweiperChange(e){
			this.$emit('sweiperChange',e);
		},
		jump(item) {
			if (this.jumpHref) {
				let href = this.jumpHref;
				//轮播, 活动跳转
				if (item[href]) {
					item[href] = item[href].replace(/\s*/g, '');
					uni.navigateTo({
						url: '/' + item[href] + '?isGOback=true'
					});
				} else {
					uni.showToast({
						title: '暂未开放',
						icon: 'none'
					});
				}
			} else {
				return;
			}
		}
	}
};
</script>
